<template>
	<view>
        <view class="orderTitle">
        	<view :class="[titleFlag==0?'active':'titleItem']" @click="unpaidBtn(0)">
        		我发布的
        	</view>
        	<view :class="[titleFlag==1?'active':'titleItem']" @click="unpaidBtn(1)">
        		我参与的
        	</view>
        
        </view>
		
			
			<view class="plr15">
			<view class=" justify-between flex-wrap ">
				<view class="orderItem bgWhite ptb10 plr10 mb12  mt10 radius10 " v-for="(item,index) in gyList "
					:key="index"  @click="toMain(item)">
					<view class="align-center">
						<image class="avatar" :src="item.avatar" mode=""></image>
						<text>发起人：{{userInfo.nickname}}</text>
						<text class="ml10">电话：{{userInfo.mobile}}</text>
					</view>
					<view class=" justify-start">
                        
						<image :src="userInfo.pic" mode=""></image>
						<view class="flex-col orderright justify-between ">
							<text class="orderName clamp  mt10">{{item.title}}</text>
						    <view class="justify-start align-center">
						        <text>开擂人数：{{item.num}}</text>
						        <text class="ml10">  擂台段位：{{item.level}}档</text>
						    </view>
							<view class="">
								发起时间：{{item.addtime||""}}
							</view>
						    <view class="justify-between align-center baoming">
                                <uv-line-progress inactiveColor="rgba(0,197,132,0.3);" :showText="false" :percentage="computedNums(item)" activeColor="#00C584"></uv-line-progress>
								<text style="margin-left: 4rpx;">还差 {{computedNum(item)}} 人成擂</text>
						       <image @click.stop="cancel(item)" :src="item.status==3?'../../static/images/middle/baomings.png':'../../static/images/middle/baoming.png' " mode="widthFix"></image>
                               <view @click.stop="cancel(item)"   :class="item.status==3?'canceld statustext':'statustext'">
                                   {{item.status==3?"已取消":"取消擂台"}}
                               </view>
						    </view>
							
						</view>
					</view>
					
				</view>
				
			</view>
			<view class="" v-if="gyList.length==0">
				<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
			</view>
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		<view class=" bgWhite paybtn">
		    <view class="justify-between align-center">
		        <view class="align-center justify-between flex1">
		           <view class="flex-col align-center" @click="$utils.toHome()">
		               <image src="../../static/images/index/tabBar1.png" mode="widthFix"></image>
		               首页
		           </view>
		           <button style="line-height: 1.2; font-size: 24rpx;" open-type="contact" @contact="contact" class="flex-col align-center">
		               <image src="../../static/images/middle/chat.png" mode="widthFix"></image>
		               客服
		           </button>
		        </view>
		            <view class="payright align-center" >
		                    <view @click="toApply()" class="onlinePay">发布擂台</view>
		            </view>
		    </view>
		</view>	
		<uv-popup ref="popup" bgColor="none" mode="center">
		    <view class="flex-col align-center">
		        <view class="bgWhite popcontent flex-col justify-between plr15" style="height: 558rpx;">
		            <view class="pt15  ">
		                <view class="mb20 popTitle justify-center">
		                    同城应约
		                </view>
		            </view>
					<view @click="showLevelPicker" class="mb5" style="padding-left: 20rpx; height:82rpx;line-height:82rpx;font-size: 30rpx;color: #A7A7A7; background: #F5F5F5;border-radius:8rpx">
						{{level}}
					</view>
					<uv-textarea v-model="beizhu"  height="70" customStyle="border:none;flex:none; height:170rpx; background: #F5F5F5;border-radius:8rpx" count placeholder="请输入内容"></uv-textarea>
		            
		           <view class="save_btn" @click="save">
		           	确定应约
		           </view>
		        </view>
		        <uv-icon @click="close" color="#fff" size="35" name="close-circle"> </uv-icon>
		    </view>
		</uv-popup>
		<uv-picker ref="labelPicker" keyName="title"  :columns="[labelList]" @confirm="labelConfirm"></uv-picker>
		<uv-picker ref="genderPicker" keyName="title"  :columns="[genderList]" @confirm="genderConfirm"></uv-picker>
		<uv-datetime-picker ref="datetimePicker" v-model="yuyue_time" mode="datetime" @confirm="timeConfirm">
		</uv-datetime-picker>
		<uv-picker ref="levelPicker" keyName="name" :columns="[levelList]" @confirm="levelConfirm"></uv-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gyList: [
				],
				genderList: [
						
					{
						id:1,
						title:"女"
					},
					{
						id:2,
						title:"男"
					},
					
				],
                titleFlag:0,
				orderList: [],
				page:1,
				labelType:'类型',
				timeType:'时间',
				labelList:[],
				label_id:"",
				keyword:"",
				level:"",
				yuyue_time:null,
				genderType:'性别',
				ballId:"",
				beizhu:"",
				levelList: [{
						name: '1-3段',
						id: 1
					},
					{
						name: '3-5段',
						id: 2
					},
					{
						name: '5-7段',
						id: 3
					},
					{
						name: '7-9段',
						id: 4
					},
                    {
                    	name: '9-11段',
                    	id: 5
                    },
				],
                userInfo:uni.getStorageSync('userInfo')
			}
		},
		onShow() {
			this.gyList=[]
			this.getList()
		},
		mounted() {
			
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
            computedNum(item){
              return item.num-item.join_num  
            },
            computedNums(item){
                   let num  = ( ( item.join_num/item.num)*100).toFixed(0)
                    return  Number(num)
            },
			click(e) {
				console.log(e)
			},
            
			search(){
				this.page=1
				this.gyList=[]
				this.getList()
			},
			levelConfirm(e) {
				this.level = e.value[0].name
			},
			showLevelPicker(){
				this.$refs.levelPicker.open()
			},
			labelConfirm(e){
				this.labelType = e.values[0].title
				this.label_id=e.values[0].id
				this.page=1
				this.gyList=[]
				this.getList()
			},
			timeConfirm(e){
				console.log(e)
				this.timeType = this.$utils.formatDateTime(e.value)
				this.page=1
				this.gyList=[]
				this.getList()
			
				
			},
			genderConfirm(e){
				
				this.genderType = e.values[0].title
				this.gender=e.values[0].id
				this.page=1
				this.gyList=[]
				this.getList()
			
				
			},
			showGenderPicker(){
				this.$refs.genderPicker.open()
			},
			showLabelPicker(){
				this.$refs.labelPicker.open()
			},
			showTimePicker(){
				this.$refs.datetimePicker.open()
			},
			toUserList() {
				uni.navigateTo({
					url: '/pages/artist/index'
				})
			},
			toAct() {
				uni.navigateTo({
					url: '/pages/activity/index'
				})
			},
			toBooking() {
				uni.switchTab({
					url: '/pages/tabbar/chat'
				})
			},
			toApply() {
				uni.navigateTo({
					url: '/pages/arenaApply/index'
				})
			},
			unpaidBtn(type) {
				this.page = 1
				this.gyList = []
				this.titleFlag = type
				this.getList()
			},
			async getList() {
                let data ;
                if(this.titleFlag==0){
                    data= await this.$api.myArenaList({
                    	page:this.page,
                    	
                    })
                }else{
                    data= await this.$api.myJoinArena({
                    	page:this.page,
                    	
                    })
                }
				
				
				this.gyList =[...this.gyList,...data.list]
			},
			async getCate() {
				const 	list	 = await this.$api.labelLst()
				console.log(list)
					this.labelList = list.data
				
			},
			

			toArticleMain(i) {
				uni.navigateTo({
					url: '/pages/article/index?id=' + i.id
				})
			},
			toMain(item) {
                if(this.titleFlag==1) return    
				uni.navigateTo({
					url: '/pages/myTableDetail/index?id=' + item.id
				})
			},
			toArtCate(index) {
				uni.navigateTo({
					url: '/pages/activity/index?index=' + index
				})
			},
			change(data) {
				uni.navigateTo({
					url: '/pages/addressMain/index?id=' + data
				})
			},
			apply(data){
				this.ballId=data.id
				this.level=''
				this.beizhu=''
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			save(){
				this.$api.ballYingyue({
					level:this.level,
					beizhu:this.beizhu,
					id:this.ballId
				}).then(res=>{
					uni.showToast({
						title:'应约成功',
						icon:'none'
					})
					this.$refs.popup.close()
				})
			},
            cancel(item){
                let vm =this
                uni.showModal({
                    title:'提示',
                    content:'确定要取消该擂台吗',
                    success:function(res){
                        if(res.confirm){
                                vm.$api.cancelArena({id:item.id}).then(res=>{
                                    vm.page=1
                                    vm.gyList=[]
                                    vm.getList()
                                    
                                })
                        }
                        
                    }
                })
            }
		},


	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		position: relative;
		z-index: 99;
	}

</style>
<style scoped lang="scss">
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}
	.orderItem {
		font-size: 24rpx;
		color: #666;
		width: 100%;
		image {
			width: 205rpx;
			height: 205rpx;
			border-radius: 15rpx;
			margin-right: 20rpx;
	
		}
		.avatar{
				width: 47rpx;
				height: 47rpx;
				border-radius: 50%;
		}
		.orderright {
			flex: 1;
	
			.orderName {
				font-weight: bold;
				font-size: 26rpx;
				color: #1C1C1C;
			}
	
			.price {
				color: #2CC6A1;
				font-size: 26rpx;
			}
		}
	
		.apply {
			width: 116rpx;
			height: 48rpx;
			background: #2CC6A1;
			border-radius: 60rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFFFFF;
		}
			
		.applyed{
		width: 116rpx;
		height: 48rpx;
		background: #464646;
		border-radius: 60rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
		}
	}
	.paybtn{
	    box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(29,29,38,0.09);
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    padding: 20rpx 30rpx;
	    background-color: #fff;
	    font-weight: 500;
	    font-size: 24rpx;
	    color: #222222;
	    .payright{
	        margin-left: 40rpx;
	        view{
	            width:466rpx;
	            height: 84rpx;
	            border-radius: 50rpx ;
	            color: #fff;
	            line-height: 84rpx;
	            font-size: 30rpx;
	            text-align: center;
	            font-weight: bold;
	            background-color: #343434;
	        }
	        .onlinePay{
	          border-radius: 50rpx ;
	            background: #01C588;
	            color: #fff;
	            
	        }
	    }
	    
	    image{
	        width: 44rpx;
	    }
	 
	  
	}
	.save_btn {
		width: 100%;
		height: 90rpx;
		margin-top: 52rpx;
		margin-bottom: 40rpx;
		background: #2CC6A1;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
	.baoming{
		height: 60rpx;
		background-color: #D9F6ED;
		padding-left: 15rpx;
		font-size: 22rpx;
        position: relative;
		color: #00C584;
		border-radius: 15rpx 15rpx 60rpx 15rpx;
		
		image{
			margin: 0;
			margin-left: 15rpx;
			width: 146rpx;
		}
	}
    .statustext{
        position: absolute;
        right: 20rpx;

            color: #fff;
            font-weight: 600;
            font-size: 26rpx;
        margin: auto;
        z-index: 9;
        color: #fff;
    }
</style>